/*
  网格布局
  和ListView一样，也可以用build
  还有其他构造函数
 */

import 'package:flutter/material.dart';

void main() => runApp(MyApp2());

/*
  一般用法
 */
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 指定列数
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridView'),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          children: [
            Container(
              height: 50,
              color: Colors.amber[100],
              child: const Center(
                child: Text('Text A'),
              ),
            ),
            Container(
              height: 50,
              color: Colors.amber[200],
              child: const Center(
                child: Text('Text B'),
              ),
            ),
            Container(
              height: 50,
              color: Colors.amber[300],
              child: const Center(
                child: Text('Text C'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

/*
  一般用法
 */
class MyApp2 extends StatelessWidget {
  final List<String> entries = <String>['A', 'B', 'C'];
  final List<int> colorCodes = <int>[600, 500, 100];

  @override
  Widget build(BuildContext context) {
    // 指定列数
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('GridView'),
          ),
          // body: GridView
          body: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 8,
                childAspectRatio: 0.5,
              ),
              itemBuilder: (ctx, index) {
                return Container(
                    height: 20,
                    color: Colors.amber[colorCodes[index % 3]],
                    child: Center(child: Text('Entry ${entries[index % 3]}')));
              })),
    );
  }
}
